<style>
</style>

<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-row class="tac">
            <el-col :span="12">
              <side-menu></side-menu>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="17">
        <el-form :inline="true" :model="orderDto" class="demo-form-inline">
          <el-form-item label="课程标题" :inline-message="true">
            <el-input v-model="orderDto.courseTitle" placeholder="课程标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="orderDto.orderBy" placeholder="下单时间顺序" @change="updateOrder">
              <el-option label="下单时间正序" :value="'acs'"></el-option>
              <el-option label="下单时间逆序" :value="'desc'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableList">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="orderNo"
            label="订单号"
          >
          </el-table-column>
          <el-table-column
            prop="courseTitle"
            label="课程标题"
          >
          </el-table-column>
          <el-table-column
            prop="courseCover"
            label="课程封面"
          >
            <template slot-scope="scope">
             <img :src="scope.row.courseCover"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalFee"
            label="金额"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="支付类型"
          >
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? '微信' : '支付宝' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
          >
            <template slot-scope="scope">
              {{ scope.row.payType === 1 ? '已支付' : '未支付' }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.payType!==1"
                @click.native.prevent="createOrders(scope.row.courseId)"
                type="primary"
                size="small">
                去支付
              </el-button>
              <el-button
                @click.native.prevent="getOrderInfo(scope.row.id)"
                type="primary"
                size="small">
                详情
              </el-button>
              <el-button
                @click.native.prevent="delOrder(scope.row.id)"
                type="text"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="orderDto.pageNum"
            :page-size="orderDto.pageSize"
            :page-count="orderDto.pages"
            layout="total,  prev, pager, next, jumper"
            :total="orderDto.total">
          </el-pagination>
        </div>
        <el-dialog
          title="订单详情"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form ref="form" :model="order" label-width="80px">
            <span style="font-size: larger; font-weight: bold;">课程标题</span>&nbsp;&nbsp; {{ order.courseTitle }}<br>
            <span style="font-size: larger; font-weight: bold;">课程内容:</span>&nbsp;&nbsp; {{ order.courseCover }}<br>
            <span style="font-size: larger; font-weight: bold;">讲师名称:</span>&nbsp;&nbsp; {{ order.teacherName }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{ order.nickname }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人手机:</span>&nbsp;&nbsp; {{ order.mobile }}<br>
            <span style="font-size: larger; font-weight: bold;">购买金额:</span>&nbsp;&nbsp; {{ order.totalFee }}<br>
            <span style="font-size: larger; font-weight: bold;">支付方式:</span>&nbsp;&nbsp;
            {{ order.status === 1 ? '微信' : '支付宝' }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{ order.nickname }}<br>
            <span style="font-size: larger; font-weight: bold;">购买时间:</span>&nbsp;&nbsp; {{ order.payTime }}<br>
            <span style="font-size: larger; font-weight: bold;">订单状态:</span>&nbsp;&nbsp;
            {{ order.payType === 1 ? '已支付' : '未支付' }}

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
      <el-col :span="2">
      </el-col>
    </el-row>

  </div>
</template>

<script>

import SideMenu from "../../components/SideMenu/SideMenu.vue";
import {delOrder, getOrder, getOrderList} from "../../api/memberOrder";
import cookie from "js-cookie";
import ordersApi from '@/api/orders'

export default {
  components: {SideMenu},
  data() {
    return {
      tableData: [],
      orderDto: {
        memberId: '',
        tradeState: '',
        courseTitle: '',
        orderBy:'acs',
        pageNum: 1,
        pageSize: 3,
        total: 0,
        pages: 0
      },
      dialogVisible: false,
      order: {}
    }
  },
  methods: {
    getTableList() {
      getOrderList(this.orderDto).then(
        res => {
          console.log(res)
          this.tableData = res.data.records
          this.orderDto.total = res.data.total
          this.orderDto.pageNum = res.data.current
          this.orderDto.pageSize = res.data.size
          this.orderDto.pages = res.data.pages
        }
      )
    },
    getOrderInfo(oid) {
      getOrder(oid).then(
        res => {
          this.dialogVisible = true
          this.order = res.data
        }
      )
    },
    delOrder(oid) {
      delOrder(oid).then(
        res => {
          console.log(res)
          this.getTableList()
        }
      )
    },
    updateOrder() {
      console.log(this.orderDto.orderBy)
      this.getTableList()
    },
    createOrders(courseId) {
      ordersApi.createOrders(courseId)
        .then(response => {
          //获取返回订单号
          //生成订单之后，跳转订单显示页面
          this.$router.push({path: '/orders/' + response.data})
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.orderDto.pageNum = val
      this.getTableList()
    }

  },
  created() {
    this.orderDto.memberId = cookie.get('uid')
    this.getTableList()
  }
}


</script>
